<template>
	<view>
		<up-image :src="detailInfo.bgImage || bg" width="100vw" height="100vh" mode="widthFix"></up-image>
		
		<view class="op-wrap">
			<up-button type="warning" text="开始答题" shape="circle" @click="handleClick"></up-button>
		</view>
		
		<up-modal :show="show">
			<template v-slot:default>
				<view class="form-view">
					<view>温馨提示</view>
					<view class="time-view">活动时间</view>
					<view class="time-item">
						<view class="label">开始时间</view>
						<view>{{detailInfo.activityStartTime}}</view>
					</view>
					<view class="time-item">
						<view class="label">结束时间</view>
						<view>{{detailInfo.activityEndTime}}</view>
					</view>
					<view class="time-view">题目：{{detailInfo.activityContestQuestionVOList.length}}</view>
					<view>不限时</view>
				</view>
			</template>
			<template v-slot:confirmButton>
				<view style="padding-bottom:60rpx;width: 280rpx;margin: 0 auto;">
					<up-button type="warning" text="我知道了，开始" @click="handleRedirect"></up-button>
				</view>
			</template>
		
		</up-modal>
	</view>
</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	
	export default {
		data() {
			return {
				bg: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%9F%A5%E8%AF%86%E7%AB%9E%E8%B5%9B%E8%AF%A6%E6%83%85/u7.png',
				show: false,
				detailInfo: {}
			}
		},
		onLoad(options) {
			this.options = options
			const id = options.id;
			this.getDetail(id)
		},
		methods: {
			async getDetail(id){
				const result = await activityApi.getCompetitionDetail(id);
				this.detailInfo = result.data;
			},
			handleClick() {
				this.show = true
			},
			async handleRedirect() {
				const result = await activityApi.getCompetitionJoin(this.options.id);
							
				if (result.code == 0) {
					uni.navigateTo({
						url: '../brisk-walking/knowledgeContest?id=' + this.options.id + '&type=3'
					});
				} else {
					uni.showToast({
					  title: result.msg,
					  icon: 'none',
					});
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.op-wrap {
		position: absolute;
		top: 50vh;
		bottom: 0;
		left: 0;
		right: 0;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		.u-button {
			width: 300rpx;
		}
	}
	.form-view {
		padding: 30rpx 0;
		font-weight: 700;
		font-size: 32rpx;
		.time-view {
			margin: 30rpx 0;
		}
		.time-item {
			font-size: 28rpx;
			color: #919191;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			.label {
				margin-right: 30rpx;
			}
			span {
				display: inline-block;
				margin-right: 20rpx;
			}
		}
	}
</style>